<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">秒杀列表</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="app">
    <div class="modal fade" tabindex="-1" role="dialog" id="detail">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">秒杀详情</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <h1 class="text-center">{{seckill.name}}</h1>
                        </div>
                    </div>
                    <template v-if="!seckillState">
                        <div class="row">
                            <div class="col-lg-12 text-center" style="color: red">
                                <h2>
                                    <span class="glyphicon glyphicon-time"></span>
                                    <span id="killTime">{{end?msg:time}}</span>
                                </h2>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <div class="row">
                            <div class="col-lg-12 text-center">
                                <button type="button" class="btn btn-success" @click="execution">秒杀</button>
                            </div>
                        </div>
                    </template>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
</body>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情页</a>
</script>
<script>
    var vue = new Vue({
        el: "#app",
        data() {
            return {
                seckill: {},
                seckillExposer: {},
                seckillState: false,
                time: "",
                msg: "",
                end: true
            }
        },
        methods: {
            countdown(seckillId, nowTime, startTime, endTime) {
                if (nowTime > endTime) {
                    // 秒杀结束
                    vue.end = true
                    vue.msg = "秒杀已结束！"
                } else if (nowTime < startTime) {
                    // 秒杀未开始
                    vue.end = false
                    $('body').countdown(startTime, function (event) {
                        vue.time = event.strftime('秒杀倒计时：%D天 %H时 %M分 %S秒')
                    }).on('finish.countdown', function () {
                        $.post("/seckill/" + seckillId + "/exposer", function (res) {
                            if (res.status == '0') {
                                var exposer = res.data
                                vue.seckillExposer = exposer
                                vue.seckillState = exposer.exposed
                                if(exposer.exposed){
                                    // 秒杀开始
                                } else {
                                    // 秒杀未开始
                                    vue.countdown(exposer.seckillId,exposer.now,exposer.startTime,exposer.endTime)
                                }
                            }
                        })
                    })
                } else {
                    // 秒杀开始
                    $.post("/seckill/" + seckillId + "/exposer", function (res) {
                        if (res.status == '0') {
                            var exposer = res.data
                            vue.seckillExposer = exposer
                            vue.seckillState = exposer.exposed
                            if(exposer.exposed){
                                // 秒杀开始
                            } else {
                                // 秒杀未开始
                                vue.countdown(exposer.seckillId,exposer.now,exposer.startTime,exposer.endTime)
                            }
                        }
                    })
                }
            },
            execution() {
                $.post("/seckill/" + this.seckillExposer.seckillId + "/" + this.seckillExposer.md5 + "/executionByProcedure", function (res) {
                    layer.msg(res.message)
                })
            }
        },
        watch: {
            // 属性监听
        }
    });
    var table = layui.table;

    table.render({
        elem: '#test'
        , url: '/seckill/list'
        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        , parseData: function (res) { //res 即为原始返回的数据
            return {
                "code": res.status, //解析接口状态
                "msg": res.message, //解析提示文本
                "data": res.data //解析数据列表
            };
        }
        , cols: [[
            {field: 'name', title: '名称', align: 'center'},
            {field: 'number', title: '库存', align: 'center'},
            {field: 'startTime', title: '开始时间', align: 'center'},
            {field: 'endTime', title: '结束时间', align: 'center'},
            {field: 'createTime', title: '创建时间', align: 'center'},
            {fixed: 'right', width: 178, align: 'center', toolbar: '#barDemo'}
        ]]
    });

    //监听工具条
    table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
        switch (layEvent) {
            case 'detail':
                if (!$.cookie("userPhone")) {
                    $.cookie("userPhone", 18996158141)
                    window.location.reload()
                    return false;
                }
                $.get("/seckill/" + data.seckillId + "/detail", function (res) {
                    if (res.status == "0") {
                        vue.seckill = res.data
                        $.get("/seckill/time/now", function (res) {
                            vue.countdown(data.seckillId, res.data, vue.seckill.startTime, vue.seckill.endTime)
                            $('#detail').modal('show')
                        })
                    }
                })
                break
        }
    });

    $('#myModal').on('hidden.bs.modal', function (e) {
        vue.seckillState = false
        vue.seckillExposer = {}
    })
</script>
</html>